﻿<div class="container-fluid navbar-fixed-top top-bar">
    <div class="container-title">
        <div class="container-title-back" ng-click="back()"></div>
        <div class="container-title-main">还贷等额本金还贷计算器</div>
    </div>
</div>
<div class="clear50"></div>
<div class="fdjsq">
    <div class="container-fluid bg">
        <h1>每月月供参考（元）</h1>
        <div class="list-menu">
            <ul class="nav navbar-right">
                <li class="dropdown">
                    <select id="pay" class="dropdown" style="font-size:20px">
                        <option>￥0.00</option>
                    </select>
                </li>
            </ul>
        </div>
        <!--<h2>0.00</h2>-->
        <div class="row">
            <div class="clear10"></div>
            <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 border-right-w"><h3>支付利息(元）</h3><h4>￥0.00</h4></div>
            <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"><h3>还款总额(元)</h3><h4>￥0.00</h4></div>
            <div class="clear20"></div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="list-menu">
        <ul class="nav navbar-right">
            <li class="dropdown">
                <a data-toggle="dropdown" class="repaytype">还款方式</a>
                <ul class="dropdown-menu">
                    <li><a>商业贷款</a></li>
                    <li><a>公积金贷款</a></li>
                    <li><a>组合贷款</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="list-menu">
        <ul class="nav navbar-right">
            <li class="li-select">
                <select id="year" class="dropdown">
                    还贷年限
                    <option value="1">1年（12期）</option>
                    <option value="2">2年（24期）</option>
                    <option value="3">3年（36期）</option>
                    <option value="4">4年（48期）</option>
                    <option value="5">5年（60期）</option>
                    <option value="6">6年（72期）</option>
                    <option value="7">7年（84期）</option>
                    <option value="8">8年（96期）</option>
                    <option value="9">9年（108期）</option>
                    <option value="10">10年（120期）</option>
                    <option value="11">11年（132期）</option>
                    <option value="12">12年（144期）</option>
                    <option value="13">13年（156期）</option>
                    <option value="14">14年（168期）</option>
                    <option value="15">15年（180期）</option>
                    <option value="16">16年（192期）</option>
                    <option value="17">17年（204期）</option>
                    <option value="18">18年（216期）</option>
                    <option value="19">19年（228期）</option>
                    <option value="20" selected="">20年（240期）</option>
                    <option value="25">25年（300期）</option>
                    <option value="30">30年（360期）</option>
                </select>
            </li>
        </ul>
    </div>
    <div class="putong">
        <div class="list-input">
            <input type="text" placeholder="请输入贷款额度">
        </div>
        <div class="list-input">
            <input type="text" placeholder="请输入贷款利率" style="width:90%">%
        </div>
    </div>
    <div class="zuhe" style="display:none">
        <div class="list-input">
            <input type="text" placeholder="请输入总金额">
        </div>
        <div class="list-input">
            <input type="text" placeholder="请输入商业贷款金额">
        </div>
        <div class="list-input">
            <input type="text" placeholder="请输入公积金贷款金额">
        </div>
        <div class="list-input">
            <input type="text" placeholder="请输入商业贷款利率" style="width:90%">%
        </div>
        <div class="list-input">
            <input type="text" placeholder="请输入公积金贷款利率" style="width:90%">%
        </div>
    </div>
    <div class="clear20"></div>
    <div class="tips">
        <b class="c8">
            <a ng-href="#/rate">
                <div class="w_alert">利率说明</div>
                利率说明
            </a>
        </b>
    </div>
    <div class="clear20"></div>
    <button type="button" class="btn btn-default btn-block">计算</button>
</div>
<div class="clear10"></div>
<script>
    $(".dropdown-menu li a").click(function () {
        $(this).parent().parent().parent().find("a").not(".dropdown-menu a").html($(this).html())
    })
</script>
<script>
    setInterval(function () {
        if ($(".dropdown a").html() == "组合贷款") {
            $(".putong").hide(); $(".zuhe").show();
        } else { $(".putong").show(); $(".zuhe").hide(); }
    }, 500)

</script>
<script>
    function repayment(oTotal, oDate, oRate) {
        //total:贷款总数  date：贷款实现，月  rate：利率
        var obj = new Object();
        obj.total = oTotal;
        obj.date = oDate * 12;
        obj.rate = oRate / 100;
        obj.payTotal = 0;

        //principal：每月还款本金 payment:本金加利息 payArr:每月还钱数额数组
        obj.principal = obj.total / obj.date;
        obj.payment = 0;
        obj.payArr = [];

        for (var i = 0; i < obj.date; i++) {
            obj.payment = (obj.total - i * obj.principal) * obj.rate / 12 + obj.principal;
            obj.payTotal += obj.payment;
            obj.payArr.push(obj.payment.toFixed(2));
        }
        return obj;
    }

    $(".btn-block").click(function () {
        if ($(".repaytype").html() == "组合贷款") {
            var oTotal01 = $(".zuhe div:eq(1) input").val();
            var oTotal02 = $(".zuhe div:eq(2) input").val();
            var oDate = $("#year").val();
            var oRate01 = $(".zuhe div:eq(3) input").val();
            var oRate02 = $(".zuhe div:eq(4) input").val();
            if (isNaN(oDate)) {
                alert("请选择还款期限");
                return;
            } else if ($(".zuhe div:eq(0) input").val() == "") {
                alert("请输入贷款总额")
                return;
            } else if (isNaN($(".zuhe div:eq(0) input").val())) {
                alert("请输入正确的贷款总额");
                return;
            } else if (oTotal01 == "") {
                alert("请输入商业贷款金额");
                return;
            } else if (oTotal02 == "") {
                alert("请输入公积金贷款金额");
                return;
            } else if (isNaN(oTotal01)) {
                alert("请输入正确的商业贷款金额");
                return;
            } else if (isNaN(oTotal02)) {
                alert("请输入正确的公积金贷款金额");
                return;
            } else if ((Number(oTotal01) + Number(oTotal02)) != $(".zuhe div:eq(0) input").val()) {
                alert("总金额不等于贷款总额")
                return;
            } else if (oRate01 == "") {
                alert("请输入商业贷款利率");
                return;
            } else if (isNaN(oRate01)) {
                alert("请输入正确的商业贷款利率")
                return;
            } else if (oRate01 > 10 || oRate02 > 10) {
                alert("贷款利率不能超过10")
                return;
            } else if (oRate02 == "") {
                alert("请输入公积金贷款利率")
                return;
            } else if (isNaN(oRate02)) {
                alert("请输入正确的公积金贷款利率")
                return;
            }
            var repay01 = new repayment(oTotal01, oDate, oRate01);//商业贷款
            var repay02 = new repayment(oTotal02, oDate, oRate02);//公积金贷款
            var repay03 = [];
            for (var i = 0; i < repay01.payArr.length; i++) {
                repay03[i] = parseFloat(parseFloat(repay01.payArr[i]) + parseFloat(repay02.payArr[i]));
            }
            var output = [];
            $.each(repay03, function (key, value) {
                output.push('<option value="' + key + '">' + (parseInt(key) + 1) + "月,￥" + value.toFixed(2) + " (元)" + '</option>');
            });
            $('#pay').html(output.join(''));
            var lixi = (repay01.payTotal - repay01.total) + (repay02.payTotal - repay02.total);
            $(".fdjsq > div > div > div:eq(1)").find("h4").html("￥" + lixi.toFixed(2));
            $(".fdjsq > div > div > div:eq(2)").find("h4").html("￥" + (repay01.payTotal + repay02.payTotal).toFixed(2));
        } else {
            var oTotal = $(".putong div:eq(0) input").val();
            var oDate = $("#year").val();
            var oRate = $(".putong div:eq(1) input").val();
            if ($(".repaytype").html() == "还款方式") {
                alert("请选择还款方式");
            } else if (oTotal == "") {
                alert("请输入贷款总额");
                return;
            } else if (isNaN(oTotal)) {
                alert("请输入正确的贷款总额");
                return;
                $(".fdjsq > div > div > div:eq(1)").find("h4").html(0);
            } else if (isNaN(oDate)) {
                alert("请选择还款期限");
                return;
            } else if (oRate == "") {
                alert("请输入贷款利率");
                return;
            } else if (isNaN(oRate)) {
                alert("请输入正确的贷款利率")
                return;
            } else if (oRate > 10) {
                alert("贷款利率不能超过10")
                return;
            }
            var repay = new repayment(oTotal, oDate, oRate);
            var output = [];
            $.each(repay.payArr, function (key, value) {
                output.push('<option value="' + key + '">' + (parseInt(key) + 1) + "月,￥" + value + " (元)" + '</option>');
            });
            $('#pay').html(output.join(''));
            $(".fdjsq > div > div > div:eq(1)").find("h4").html("￥" + (repay.payTotal - repay.total).toFixed(2));
            $(".fdjsq > div > div > div:eq(2)").find("h4").html("￥" + repay.payTotal.toFixed(2));
            //}
        }
    })
</script>